<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/echarts.min.js"></script>
  </head>
  <body>
    <div class="wrap">
      <div class="header">
        <div class="header-img">
          <!-- <img src="./img/header.png" alt="" /> -->
        </div>
        <!-- logo+标题 -->
        <div class="logo-con">
          <img src="./img/logo.png" alt="" />
          <div class="header-title">人才工作驾驶舱</div>
        </div>
        <!-- 顶部按钮 -->
        <div class="btn-top">
          <div class="menu-item">
            <img src="./img/menu.png" alt="" />
            <div class="title">管理驾驶舱</div>
          </div>
          <div class="menu-item">
            <img src="./img/menu.png" alt="" />
            <div class="title">成长导航舱</div>
          </div>
          <div class="menu-item">
            <img src="./img/menu.png" alt="" />
            <div class="title">画像显示舱</div>
          </div>
        </div>
        <!--  -->
        <!-- tab -->
        <div class="tabs">
          <div class="tab">
            <img src="./img/tab.png" alt="" />
            <div class="label">人才工作总览</div>
          </div>
          <div class="tab">
            <img src="./img/tab.png" alt="" />
            <div class="label">人才成果分析</div>
          </div>
          <div class="tab">
            <img src="./img/tab.png" alt="" />
            <div class="label">人才成长分析</div>
          </div>
          <div class="tab">
            <img src="./img/tab.png" alt="" />
            <div class="label">高层次人才画像</div>
          </div>
          <div class="tab">
            <img src="./img/tab.png" alt="" />
            <div class="label">人才工作作战图</div>
          </div>
        </div>
      </div>
      <!-- 分为三块 -->
      <div class="middle">
        <!-- 中间左侧 -->
        <div class="left">
          <div class="left-item person-top">
            <div class="person-item">
              <div class="person-box">
                <div class="title full-bg">国家级人才</div>
                <div class="count">170</div>
              </div>
              <div class="person-box">
                <div class="title full-bg">省部级人才</div>
                <div class="count">597</div>
              </div>
            </div>
            <div class="person-item bottom-person">
              <div class="person-box">
                <div class="title full-bg">院士</div>
                <div class="count">597</div>
              </div>
              <div class="person-box">
                <div class="title full-bg">国家级领军人才</div>
                <div class="count">597</div>
              </div>
              <div class="person-box">
                <div class="title full-bg">国家级领军人才</div>
                <div class="count">597</div>
              </div>
            </div>
          </div>
          <div class="left-item">
            <div class="person-bottom">
              <div class="banner full-bg">
                <div class="title">第三轮15551卓越人才工程</div>
                <div class="count">220</div>
              </div>
              <div class="box-list">
                <div class="item">
                  <div class="box">
                    <img src="./img/small-r.png" alt="" />
                    <div class="count">14</div>
                  </div>
                  <div class="title">战略科学家</div>
                </div>
                <div class="item">
                  <div class="box">
                    <img src="./img/small-r.png" alt="" />
                    <div class="count">14</div>
                  </div>
                  <div class="title">学科首席教授</div>
                </div>
                <div class="item">
                  <div class="box">
                    <img src="./img/small-r.png" alt="" />
                    <div class="count">39</div>
                  </div>
                  <div class="title">科技创新人才</div>
                </div>
                <div class="item">
                  <div class="box">
                    <img src="./img/small-r.png" alt="" />
                    <div class="count">14</div>
                  </div>
                  <div class="title">教育教学名师</div>
                </div>
                <div class="item">
                  <div class="box">
                    <img src="./img/small-r.png" alt="" />
                    <div class="count">14</div>
                  </div>
                  <div class="title">青年拔尖人才</div>
                </div>
              </div>
              <!-- 长方形 -->
              <div class="rectangle full-bg">
                <div>
                  <div class="title">专任教师</div>
                  <div class="count">3305</div>
                </div>
                <div>
                  <div class="title">博士后</div>
                  <div class="count">276</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间人才 -->
        <div class="center">
          <div class="grid-container">
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">20</div>
                <div class="total">40</div>
              </div>
              <div class="box-title">新增国家级人才</div>
            </div>
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg2.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">48</div>
                <div class="total">80</div>
              </div>
              <div class="box-title">新增省部级人才</div>
            </div>
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg3.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">1</div>
                <div class="total">5</div>
              </div>
              <div class="box-title">新增国家级海外 高层次人才</div>
            </div>
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">121</div>
                <div class="total">150</div>
              </div>
              <div class="box-title">引进优秀青年教师</div>
            </div>
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg2.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">121</div>
                <div class="total">150</div>
              </div>
              <div class="box-title">博士后进站人数</div>
            </div>
            <div class="grid-item">
              <div class="box">
                <img src="./img/bs-bg3.png" alt="" />
                <!-- 中间数字 -->
                <div class="count">50</div>
                <div class="total">90</div>
              </div>
              <div class="box-title">引进海外优秀青年教师人数</div>
            </div>
          </div>
        </div>
        <!-- 中间右侧 -->
        <div class="right">
          <div class="one">
            <div class="tab full-bg">
              <div class="title person-tab">学部人才</div>
              <div class="second-tab full-bg">
                <div class="title">单位人才</div>
              </div>
            </div>
            <div class="content full-bg" id="unit-talent"></div>
          </div>
          <div class="two">
            <div class="tab full-bg">
              <div class="title">年度入选领军人才青年人才对比</div>
              <div class="select-wrapper">
                <select class="clean-select">
                  <option>2022</option>
                  <option>2023</option>
                  <option>2024</option>
                  <option>2025</option>
                </select>
              </div>
            </div>
            <div class="content full-bg" id="year-talent"></div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-box">
          <div class="tab full-bg">
            <div class="title">人才年龄分布</div>
            <div class="select-wrapper">
              <select class="clean-select">
                <option>国家级</option>
                <option>省级</option>
                <option>市级</option>
              </select>
            </div>
            <div class="operation">
              <img src="./img/right.png" alt="" />
            </div>
          </div>
          <div class="content full-bg" id="one-chart"></div>
        </div>
        <div class="footer-box">
          <div class="tab full-bg">
            <div class="title">人才增长趋势</div>
            <div class="select-wrapper">
              <select class="clean-select">
                <option>国家级</option>
                <option>省级</option>
                <option>市级</option>
              </select>
            </div>
            <div class="operation">
              <img src="./img/right.png" alt="" />
            </div>
          </div>
          <div class="content full-bg" id="increase-talent"></div>
        </div>
        <div class="footer-box">
          <div class="tab full-bg">
            <div class="title">专任教师海外经历</div>
            <div class="operation">
              <img src="./img/right.png" alt="" />
            </div>
          </div>
          <div class="content full-bg" id="overseas"></div>
        </div>
        <div class="footer-box">
          <div class="tab full-bg">
            <div class="title">博士后进站人数</div>
            <div class="operation">
              <img src="./img/right.png" alt="" />
            </div>
          </div>
          <div class="content full-bg" id="last-chart"></div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/useEcharts.js"></script>
  <script src="./js/index.js"></script>
</html>
